// 商铺信息
<template>
    <div class="message">
        <el-card class="box-card">
                <h3>商品信息</h3>
               <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
            <el-form-item label="标题" prop='title' :label-width="formLabelWidth">
              <el-input  v-model="ruleForm.title" autocomplete="off"></el-input>
            </el-form-item>    
            <el-form-item label="商铺logo" :label-width="formLabelWidth">
            <el-upload
                    class="avatar-uploader"
                    action="http://192.168.1.84:8081/upload/admin"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
                <el-form-item label="描述" prop='description' :label-width="formLabelWidth">
              <el-input  v-model="ruleForm.description" autocomplete="off"></el-input>
            </el-form-item>  
                <el-form-item label="地址" prop='address' :label-width="formLabelWidth">
              <el-input  v-model="ruleForm.address" autocomplete="off"></el-input>
            </el-form-item>  
            </el-form>
        </el-card>
        <div class="op-container">
            <button type="button" class="el-button el-button--primary" @click="update(ruleForm)">
                <span>保存更改</span>
            </button>
        </div>
    </div>
</template>
<script>
import shopsmanage from '../../api/promotion/shopsmanage'
export default{
    data() {
        return {
            ruleForm:{//输入框值
                title:"", //标题
                logoUrl:"",//图片
                description:"",//描述
                address:"",//地址
            },
            //  输入框宽度
            formLabelWidth: '100px',
            rules:{//验证码
                    title:[
                            { required: true, message: '商铺标题不能为空', trigger: 'blur'}
                        ],
                     description:[
                        { required: true, message: '商铺描述不能为空', trigger: 'blur'}
                    ],
                     address:[
                        { required: true, message: '商铺地址不能为空', trigger: 'blur'}
                    ],
            }
        }
    },
    created() {//挂载
        this.manage()
    },
    methods: {
      manage(){//初始化商铺列表
          shopsmanage.shopsmanage().then(res=>{
              this.ruleForm={...res.data.data}
          })
      },
    // 更新
      update(ruleForm){
          this.$refs.ruleForm.validate((valid) => {//输入框验证是否为空
          if (valid) {
          shopsmanage.compile(this.ruleForm).then(res=>{
              if (res.data.errmsg=='成功') {
                  this.$message.success('更改成功')
              }
              this.manage()
          })
          } else {
           this.$message.error('输入框不能为空！');
            return false;
          }
          })
      },
    //   图片
      handleAvatarSuccess(res, file) {
        this.ruleForm.logoUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        // 图片类型
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
}
</script>

<style>
>>>#app {
    text-align: 0;
}
.message{
    width: 100%;
}
.op-container{
    display: -webkit-box;
    margin-left: 65px;
}
.box-card{
   width: 90%;
    height: 50%;
   overflow: hidden;
   margin:20px auto;
}
.el-form-item__label{
    width: 150px;
}
h3{
  padding: 30px 0;
  display: -webkit-box;
}
.el-main{
    line-height: 0px;
}
.el-upload{
    display: inline-block;
    margin-right: 820px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>